<template>
  <div class="slider-wrapper">
    <div class="sys-title">
      Cesiumjs学习
    </div>
    <AMenu
      :selected-keys="selectedKeys"
      :open-keys="openKeys"
      theme="dark"
      mode="inline"
      :items="menuList"
      @select="handleSelectMenu"
    />
  </div>
</template>

<script setup>
import { routes } from '@/router/config';
import { Menu as AMenu } from 'ant-design-vue';
import { ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const routeList = routes.find(item => item.name === 'DEFAULT_LAYOUT')?.children || [];

const menuList = formatTree(routeList);

const route = useRoute();
const router = useRouter();

const openKeys = ref([]);
const selectedKeys = ref(['/basic2']);

function formatTree(tree) {
  if (!tree?.length) return;
  return tree.map(item => ({
    label: item?.meta?.title,
    title: item?.meta?.title,
    key: item.path,
    children: formatTree(item?.children),
  }));
}

function handleSelectMenu({ key }) {
  router.push(key);
}

watch(
  () => route.matched,
  (newVal) => {
    const length = newVal.length;
    const current = [newVal[length - 1].path];
    selectedKeys.value = current;
    if (length > 1) {
      openKeys.value = [newVal[length - 2].path];
    }
  },
  {
    immediate: true,
  },
);
</script>

<style lang="less" scoped>
.slider {
  &-wrapper {
    color: #fff;
  }
}
.sys-title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  padding: 12px 0;
}
</style>
